<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>large-select</title>
<link href="../../../css/assets/dpl/base.css" rel="stylesheet"/>
<link href="../../../button/demo/assets/custombutton.css" rel="stylesheet"/>
<link href="../assets/menubutton.css" rel="stylesheet"/>

<link href="../../../menu/demo/assets/menu.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/menuitem.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/submenu.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/c2c-ui.css" rel="stylesheet"/>
<style>
    .ks-menu {
        background: white;
        border: 1px solid red;
    }

    li {
        padding: 5px;
        border: 1px solid white;
    }

    .c2c-menuitem-delete {
        padding-left: 20px;
        cursor: pointer;
    }
</style>
<style>
    h1 {
        font-size: 2em;
        margin: 10px;
        text-align: center;
    }

    h2 {
        font-size: 1.5em;
        margin: 10px;
        text-align: center;
    }

    #wrap {
        width: 90%;
        margin: 0 auto;
    }
</style>
</head>
<body>
<div id="wrap">

    <h1 id="describe">菜单按钮性能演示</h1>

    <div id="holder">

    </div>

    <script src="/kissy/build/seed-debug.js"></script>
    <script src="/kissy/src/package.js"></script>


    <script>

            KISSY.use("menubutton,menu,util,node", function (S, MenuButton, Menu,util,$) {
                var holder = $("#holder");
                var start = (+new Date());

                for (var i = 0; i < 50; i++) {
                    (function (i) {

                        var menuConfig = {
                            align:{
                                offset:[0, -1]
                            },
                            width:82,
                            height:150,
                            elStyle:{
                                overflow:'auto',
                                overflowX:"hidden"
                            }
                        };

                        function constructMenu(menuConfig) {
                            return util.mix({
                                children:[]
                            }, menuConfig);
                        }

                        var b = new MenuButton.Select({
                            defaultCaption:"请选择",
                            prefixCls:"c2c-",
                            render:holder,                          
                            menu:(function () {
                                var m = constructMenu(menuConfig);
                                for (var j = 0; j < 10; j++) {
                                    m.children.push({
                                        xclass:'option',
                                        content:"item-" + i + "-" + j,
                                        value:i + "-" + j
                                    });
                                }
                                return m;
                            })()
                        }).render();
                    })(i);
                }

                alert((+new Date()) - start);
            });

    </script>
</div>
</body>
</html>